<!-- 更多店铺排行 -->
<template>
  <div class="morelist">
    <div class="filter-top" @click="showFilter = true"> 
      请选择筛选条件 <div class="isclick"></div> 
    </div>
     <div class="data-list">
      <div class="data-header">
        <div class="data-header-title">店铺 </div>
        <div class="data-header-title">销售数量 </div> 
      </div>
      <div class="data-row" v-for="(item,index) in store" :key="index" :style="{ 'background': index % 2 == 0 ? '#fff' : '#f5f5f5'}">
        <div class="data-row-item">{{item.storeName}} </div>
        <div class="data-row-item">{{item.salesCount}} </div> 
      </div> 
      <div class="view-more isbtn" @click="getMore" v-if="isNext">
        <span>加载更多</span>  <div class="isclick"></div>
      </div>
      <div class="view-more isbtn" v-else>
        <span>没有更多内容啦~</span>  
      </div>

    </div>
    <!--  下拉筛选 -->
    <top-filter :showFilter.sync="showFilter">
      <div class="filter-content" @click.stop> 
        <div class="filter-title">时间段</div>
        <div class="data-time-box">
          <div class="row-box">
            <group>
              <datetime v-model="starTime" :end-date="defult_endTime"></datetime>
            </group> 
          </div>
          <div>至</div>
          <div class="row-box">
            <group>
              <datetime v-model="endTime" :end-date="defult_endTime"></datetime>
            </group> 
          </div>
        </div>

        <div class="">城市</div>
        <div class="row-box">
          <group>
            <popup-picker v-model="city" show-name :data="cityList" placeholder="请选择城市"></popup-picker>
          </group> 
        </div>
        <div class="btn-box">
          <div class="reset btn" @click="reset">重置</div>
          <div class="confirm btn" @click="confirmSelect">确认</div>
        </div>
      </div>
    </top-filter>
    <!-- 下拉筛选end -->
 
  </div> 
</template>

<script>
import { Message } from 'element-ui'
import { Search } from 'vux'
import api from '@/api/api.js' 
import row from '@/components/row'
import topFilter from '@/components/topFilter'
import { Datetime, Group, PopupPicker,XDialog } from 'vux'
import util from '@/utils/util.js'
export default {
  name: 'more',
  components: {
    Search,
    topFilter,
    XDialog,
    Datetime, 
    row,
    Group, 
    PopupPicker
  },
  data () {
    return { 
      city:[],
      starTime:'',
      endTime: '', 
      viewIndex:0,
      list:[{}],
      searchText:'',
      showFilter: false,
      defult_endTime:'',
      totalPage:0,
      store:[],
      "pageSize": 20,
      "pageNum": 1, 
      cityList:[ JSON.parse(sessionStorage.cityList  || '[]')],
    }
  },
  created (){
    this.getAmouthDay();
  },
  mounted () {  
    this.getData()
  },
  methods: {
    // 筛选默认最近一个月
    getAmouthDay(){ 
      let today= new Date();
      let mounth_ago =  new Date(today.getTime()-(30*24*60*60*1000)); 
      this.starTime = util.timeTampt(mounth_ago);
      this.endTime= util.timeTampt(today); 
      this.defult_endTime = util.timeTampt(today); 
    },
    
    //确认搜索
    confirmSelect(){
      var parmas = {}
      if(this.city[0]){
        parmas.city = this.city[0]
      }
      parmas.startDate =this.starTime;
      parmas.endDate =this.endTime; 
      this.getData(parmas); 
    },
    //重置筛选
    reset(){
      this.searchText = '';
      this.city=[];
      this.getAmouthDay();
    },
    filterShow(){
      this.showFilter = !this.showFilter
    },
    getMore(){
      this.pageNum++;
       var parmas = {}
      if(this.city[0]){
        parmas.city = this.city[0]
      }
      parmas.startDate =this.starTime;
      parmas.endDate =this.endTime; 
      this.getData(parmas);
    }, 
    getData(params){
      params = params || {};
       let defult=   {
        "chartType":  "store",
        "start": String( (this.pageNum -1) * 10 ),
        "end":this.pageNum  * 20
      }
      params= Object.assign(defult,params);
      api.data.chart(params,res=>{
        this.showFilter = false;
        this.isNext = res.result.next == 1 ? true : false; 
        this.store = res.result.store; 
        if(this.cityList[0]){
          return 
        }
        // 转化成value 和name的形式
        let cityArr = res.result.city.map(item=>{
          return {name: item.city,value:item.city}
        })
        this.cityList = [cityArr]

      })
    },
    onSubmit(e){
      console.log(e)
    }
  }
}
</script>
 
<style lang="less" scoped> 
.morelist{
  padding-top: 44px;
}
.dialog-content{
  background: #fff;
  border-radius: 8px;
  min-height: 200px;
}
/deep/.weui-search-bar__label{
  top: 3px;
}
.filter-content{
  background: #fff;
  width: 100%;
  padding: 20px;
  /deep/.weui-search-bar:before{
    height: 0;
  }
  /deep/.weui-search-bar::after{
    height: 0;
  }
  .row-box{
    margin-bottom: 20px;
  }
  .filter-title{
    padding-top: 20px;

  }
  .data-time-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
/deep/.vux-popup-picker-select{
  text-align: left !important;
}
/deep/.weui-search-bar,.vux-search-fixed{
  position: relative !important;
  padding: 0;
  background: #fff;
}
/deep/.weui-search-bar__cancel-btn{
  text-decoration: none;
}
/deep/.weui-search-bar:after{
  display: none;
}
/deep/.weui-search-bar::before{
  display: none;
}
.btn-box{
  display: flex;
  width: 100%;
  margin-top: 20px;
  height: 44px;
  justify-content: space-between; 
  .btn{
    border-radius: 8px;
    height: 44px;
    width: 45%;
    line-height: 44px;
    text-align: center;
    color: #fff;
    &:active{
      opacity: .7;
    }
    &.reset{
      background: #ddd;
    }
    &.confirm{
      background: #FABE00;
    }
  }
}
.filter-top{
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 3;
  .isclick{
    border-width: 0 1px 1px 0;
    margin-top: -6px;
  }
}
.data-list{
    padding-top: 48px;
  .data-header{
    height: 48px;
    line-height: 48px;
    font-weight: bold;
    background: #ddd;
    display: flex;
    position: fixed;
    top: 44px;
    left: 0;
    width: 100%;
    .data-header-title{
      flex: 1;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
  .data-row{
    height: 48px;
    line-height: 48px;
    display: flex;
    &-item{
      flex: 1;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}
.view-more{
  color: #999;
  display: flex;
  align-items: center;
  height: 44px;
  justify-content: center; 
  .isclick{
    // border-width: 0 1px 1px 0;
    // margin-top: -6px;
  }
}
</style>
